<template>
  <modal :visible="visible" :index="index" @close="close">
    <div class="tile is-ancestor">
        <div class="tile is-parent">
          <article class="tile is-child box">
            <h4 class="title">添加屏幕</h4>
            <table class="table">
              <tbody>
              <tr>
                <td>名称：<input v-model="sname" type="text"></td>
                <td>行：<input v-model="" type="text" placeholder="10"></td>
                <td>列：<input v-model="" type="text" placeholder="10"></td>
                <td><button class="button is-primary" @click="">重置</button></td>
                <td><button class="button is-primary" @click="saveLayout">确定</button></td>
              </tr>
              <tr>
                <td colspan="5"><div class="title" id="container"></div></td>
              </tr>
              </tbody>
            </table>
          </article>
        </div>
      </div>
  </modal>
</template>

<script>
  import {Modal} from 'vue-bulma-modal'
  import moment from 'moment'
  import numbro from 'numbro'
  import pikaday from 'pikaday'
  import Zeroclipboard from 'zeroclipboard'
  import Handsontable from 'handsontable'
  import HotTable from 'vue-handsontable-official'
  // import { mapActions } from 'vuex'

  export default {
    components: {
      Modal,
      HotTable,
      Handsontable,
      numbro,
      moment,
      pikaday,
      Zeroclipboard
    },
    data () {
      return {
        hot: null,
        sname: ''
      }
    },
    props: {
      visible: Boolean,
      index: Number
    },
    methods: {
      /*
      ...mapActions([
        'saveLayouts'
      ]),
      */
      close () {
        this.$emit('close')
      },
      saveLayout () {
        this.$emit('initLayout', this.layout)
        // this.saveLayouts(this.layout)
        this.close()
      }
    },
    watch: {
      visible (isTure) {
        if (isTure) {
          var that = this
          this.$nextTick(function () {
            var $ = function (id) {
              return document.getElementById(id)
            }
            var container = $('container')
            that.hot = new Handsontable(container, {
              startRows: 10,
              startCols: 10,
              minRows: 10,
              minCols: 10,
              contextMenu: true,
              mergeCells: true,
              currentColClassName: 'colClass'
            })
          })
        }
      }
    },
    computed: {
      layout () {
        var layout = {}
        layout.index = this.index + 1
        layout.screen = this.sname
        layout.line = 100
        layout.row = 100
        var grids = []
        if (this.hot !== null) {
          var mergedArray = this.hot.mergeCells.mergedCellInfoCollection
          if (mergedArray.length > 0) {
            mergedArray.forEach(item => {
              grids.push({
                'width': item.colspan * 10,
                'height': item.rowspan * 10,
                'left': item.col * 10,
                'top': item.row * 10,
                'program': ''
              })
            })
          } else {
            grids.push({
              'width': 100,
              'height': 100,
              'left': 0,
              'top': 0,
              'program': ''
            })
          }
        }
        layout.grid = grids
        return layout
      }
    }
  }
</script>

<style>
  .wtHolder {
    height: 100% !important;
  }
  .colCLass {
    height: 82px !important;
  }
  .modal-container {
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
  }
</style>
